<template>
  <div classs="warrper">
    
        <transition  enter-active-class="animated zoomOutLeft" leave-active-class="animated zoomOutRight">
            <ul class="pages">
            <li class="page" v-for="(items, id) in answers" :key="id" :style="{height:height}" v-show="ids == id">
                <div class="title">{{items.title}}</div>
                <div class="options">
                    <ul v-for="(item,index) in answers[id].option" :key="index">
                        <li @click= "animate(items.id)" v-if="flag">{{item}}</li>
                    </ul>
                </div>
            </li>
            </ul>
        </transition> 
    
  </div>
</template>
<script>
export default {
  data() {
    return {
        flag: true,
        ids:0,
      answers: [
        {
          title:
            "1.印度尼西亚海域广阔，海产品种类丰富、品质优良。为扩大出口，2018年起，印尼虾开始寻求哪里作为新的出口市场？",
          option: { A: "欧洲与北非", B: "中国与中东", C: "拉美与日韩" },
          id: 1
        },
        {
          title: "2.在以下几个选项中，哪一个是巴基斯坦的重要出口商品？",
          option: { A: "化肥", B: "钢铁", C: "地毯" },
          id: 2
        },
        {
          title:
            "3.2018年1月，越南对中国出口金额超过美国，中国成为越南最大的出口市场。以下商品哪个不是越南对中国出口额的前三名商品？",
          option: { A: "手机及零件", B: "蔬菜水果", C: "红木家具" },
          id:3
        },
        {
          title: "4.哪种水果是埃及最为重要的出口水果？",
          option: { A: "橙子", B: "苹果", C: "猕猴桃" },
          id:4
        },
        {
          title:
            "5.在下面几个全球钻石主要产地中，世界上最大的钻石来自哪一个产地？",
          option: { A: "南非", B: "澳大利亚", C: "扎伊尔" },
          id:5
        },
        {
          title:
            "6.2016年在杭州举办的G20会议上,俄罗斯总统普京送来的“甜品国礼”是哪一种俄罗斯甜品？",
          option: { A: "冰激凌", B: "奶酪", C: "巧克力" },
          id:6
        },
        {
          title: "7.下面哪一个国家是世界第一大汽车出口国？",
          option: { A: "德国", B: "美国", C: "日本" },
          id:7
        },
        {
          title: "8.以下哪个不是匈牙利最具代表性的手工艺品？",
          option: { A: "刺绣", B: "瓷器", C: "皮具" },
          id:8
        },
        {
          title: "9.以下哪家专业服务机构是在英国成立的？",
          option: { A: "安永", B: "德勤", C: "毕马威" },
          id:9
        },
        {
          title: "10.下面的著名机器人中，哪一个和加拿大的机器人研究人员有关？",
          option: {
            A: "仿人机器人ASIMO",
            B: "美女机器人Sophia澳大利亚",
            C: "对弈机器人AlphaGo"
          },
          id:10
        },
        {
          title: "11.下面哪一种酒被称为是墨西哥的国酒，而且远销全球120个国家？",
          option: { A: "伏特加酒", B: "龙舌兰酒", C: "白兰地酒" },
          id:11
        },
        {
          title:
            "12.巴西的化妆品进出口量巨大。2018年，巴西是全球第几的化妆品消费市场？",
          option: { A: "第二", B: "第三", C: "第四" },
          id: 12
        }
      ],
      height: ''
    };
  },
  methods:{
      animate(id){
          this.flag = false;
          const _this = this;
           _this.ids = 1;
          _this.ids = id;
          _this.$nextTick(()=>{
             _this.flag = "true";
          })
      }
  },
  mounted (){
      let winHeight = document.body.clientHeight;
      this.height=winHeight+'px';
  }
};
</script>
<style lang="stylus" scoped>
.warrper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cd9a5b;
}
.pages{
    width 100%
    height 100%
}
.page{
    width:100%
    height 100%
    display block
}
</style>


